<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>{{music.song_name}}-好音乐</title>
    <link rel="stylesheet" href="/static/css/play.css">
    <script src="/static/js/zepto.js"></script>
    <script src="/static/js/scroll.js"></script>
    <script src="/static/js/music.bak.js"></script>
    <script src="/static/js/me.js"></script>
    <style type="text/css">
        .opt {
            position: relative;
            z-index: 10000;
        }

        .opt__item.action {
            background-repeat: no-repeat;
            background-size: .3rem .3rem;
            background-position: center;
        }

        .opt__item.action.play {
            background-image: url('/static/images/pause.png');
        }

        .opt__item.action.pause {
            background-image: url('/static/images/play.png');
        }

        .opt__item.action.loading {
            background-image: url('/static/images/loading.png');
            animation: loadingRotate 1050ms infinite;
        }

        @keyframes loadingRotate {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
<article class="wrap">
    <section id="test" class="top_operation_box js_pg_bubble" style="">
        <div class="content_operation">
            <div class="content_operation__bd">
                <h3 class="content_operation__tit js_title">更多精彩尽在好音乐~</h3>
                <a class="content_operation__btn js_btn js_tj js_song" href="javascript:;"
                   data-tj="plugin_click_$qm.488" data-id="003NGHkH2KdgFr" data-target="music"
                   data-cid="10032429">好音乐</a>
            </div>
            <img class="content_operation__img js_img"
                 src="/static/images/music.png">
        </div>
    </section>
    <section class="main">
        <div class="main__bd">
            <div class="song_info">
                <div class="song_info__hd">
                    <h1 class="song_name"><span class="song_name__text js_song_name">{{music.song_name}}</span></h1>
                    <h2 class="singer_name js_singer_name js_singer">{{music.singer_name}}</h2>
                </div>
                <div class="song_info__bd js_toggle_cover js_tj" data-tj="switch">
                    <div class="album_cover js_cover fade_out">
                        <img class="album_cover__img js_album_cover"
                             src="/{{music.my_thumb_url}}">
                    </div>
                    <div class="lyric js_lrc fade_in">
                        <div class="lyric__bd js_lrc_bd" id="lyric_txt" style="overflow: hidden;">
                            <div class="lyric__scroll js_lrc_list"
                                 style="transition: -webkit-transform 0.3s ease-out 0s; transform-origin: 0px 0px 0px; transform: translate3d(0px, -250px, 0px);">
                                <p class="lyric__para" id="line_0"
                                   style="height:auto;white-space:normal;padding:9px 0;line-height:1.5;">I'll Be Missing
                                    You (我会想你的) (Live) - 碎瓷乐队</p>
                                <p class="lyric__para" id="line_28"
                                   style="height:auto;white-space:normal;padding:9px 0;line-height:1.5;">只想对你说I'll be
                                    missing you</p>
                            </div>
                            <a class="lyric__more js_lrc_more js_openmusic js_tj" data-tj="lyric_more_$qm"
                               data-cid="10033061" style="" href="javascript:;">查看完整歌词</a>
                        </div>
                    </div>
                </div>
                <div class="opt">
                    <a class="opt__item js_mv js_tj" data-tj="with_mv_$qm" data-vid="x002592u1l3" style=""
                       href="javascript:;">
                        <svg class="opt__icon">
                            <use xlink:href="#icon_mv"></use>
                        </svg>
                    </a>
                    <a id="play_icon" class="opt__item js_play js_tj action pause" data-tj="play_click"
                       href="javascript:;">
                    </a>
                    <a class="opt__item js_like js_openmusic js_tj" data-tj="favor_$qm" data-cid="10033063"
                       href="javascript:;" data-liked="0">
                        <svg class="opt__icon">
                            <use xlink:href="#icon_like"></use>
                        </svg>
                    </a>
                </div>
                <!--<a class="btn_download js_download js_tj" data-tj="down_$qm" href="javascript:;">下载歌曲</a>-->
            </div>
            <div class="bg"><img class="bg__img js_album_cover"
                                 src="/{{music.my_thumb_url}}">
            </div>
    </section>
</article>
<audio id="h5audio_media" height="0" width="0" src="/{{music.my_song_url}}"></audio>
<script>
    var lyric = ('{{music.lyric}}').replace(/&amp;/g, '&')
    lyricUtils.elem = $(".js_lrc_list")
    lyricUtils.init(lyric)
    console.log('lyric', lyricUtils.parseLyricData(M.decodeHTML(lyric)))
    //showCurrentLrcLine
    var audio = $('#h5audio_media')[0]
    var audio_loaded = false
    audio.addEventListener("timeupdate", function () {
        if (audio.currentTime > 0 && !audio_loaded) {
            audio_loaded = true
            changeMusicStatus('play')
        }
        lyricUtils.showCurrentLrcLine(audio.currentTime)
    })
    $('#play_icon').click(function () {
        if ($(this).hasClass('loading')) {
            return
        }
        if (!audio_loaded) {
            audio.play()
            changeMusicStatus('loading')
            return
        }
        if (audio.paused) {
            changeMusicStatus('play')
            audio.play()
        } else {
            changeMusicStatus('pause')
            audio.pause()
        }
    })
    function changeMusicStatus(status) {
        var $ele = $('#play_icon')
        var statusArr = ['play', 'pause', 'loading']
        $ele.addClass(status)
        for (var i in statusArr) {
            var current = statusArr[i]
            if (current !== status && $ele.hasClass(current)) {
                $ele.removeClass(current)
            }
        }

    }
</script>
</body>
</html>